<script setup>

import axios from "axios";
import {ref} from "vue";
import {ElMessage} from "element-plus";

const props = defineProps({
  visible4Add: {
    type: Boolean,
    required: true,
  },roles: {
    type: Array,
    required: true,
  }
})

// 处理翻页，参数就是当前页码
const emit = defineEmits();

// 表单验证规则
const rules = ref({
  roleName: [
    { required: true, message: '请输入职务名称', trigger: 'blur' }
  ],
  roleKey: [
    { required: true, message: '请输入职务编码', trigger: 'blur' }
  ]
});

const addRole = async () => {
  try {
    // 验证表单
    await form.value.validate();

    // 如果验证通过，继续执行提交逻辑
    await axios.post('/role/add', role4Add.value);
    emit('update:visible4Add', false); // 关闭弹窗
    emit('add-success'); // 通知父组件添加成功
    ElMessage.success('添加成功');
  } catch (error) {
    if (typeof error === 'string') {
      ElMessage.error(error);
    } else {
      // 处理验证错误
      ElMessage.error('请检查输入信息');
    }
  }
};

// 创建一个引用以访问表单实例
const form = ref(null);

const role4Add = ref({
  status: 0
})




</script>

<template>
  <el-dialog :model-value="visible4Add"  title="添加职务" width="500px" @close="emit('update:visible4Add', false)">

    <div class="common-layout">


      <el-form :model="role4Add" :rules="rules" ref="form">
          <el-form-item label="职务名称" label-width="100" prop="roleName">
            <el-input v-model="role4Add.roleName" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="职务编码" label-width="100" prop="roleKey">
            <el-input v-model="role4Add.roleKey" autocomplete="off"/>
          </el-form-item>
      <el-form-item label="状态" label-width="100">
        <el-radio-group v-model="role4Add.status">
          <el-radio :value="0">正常</el-radio>
          <el-radio :value="1">停用</el-radio>
        </el-radio-group>
      </el-form-item>
          <el-form-item label="备注" label-width="100">
            <el-input :rows="3" type="textarea" v-model="role4Add.remark" autocomplete="off"/>
          </el-form-item>
        </el-form>

    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="emit('update:visible4Add', false)">取消</el-button>
        <el-button type="primary" @click="addRole()">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>